<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  width: {
    type: String,
    default: null, // 默认值为 null，表示未传入
  },
  height: {
    type: String,
    default: null, // 默认值为 null，表示未传入
  },
  data: {
    type: Array,
    required: true,
  },
});

const slides = ref(props.data);
const currentIndex = ref(0);
const swiperRef = ref(null); // 引用 swiper 容器
const parentWidth = ref('100%'); // 父容器宽度
const parentHeight = ref('100%'); // 父容器高度

// 监听父容器尺寸变化
let resizeObserver;
onMounted(() => {
  if (swiperRef.value && swiperRef.value.parentElement) {
    const parentElement = swiperRef.value.parentElement;

    // 初始化父容器尺寸
    parentWidth.value = `${parentElement.clientWidth}px`;
    parentHeight.value = `${parentElement.clientHeight}px`;

    // 使用 ResizeObserver 监听父容器尺寸变化
    resizeObserver = new ResizeObserver((entries) => {
      for (let entry of entries) {
        const { width, height } = entry.contentRect;
        parentWidth.value = `${width}px`;
        parentHeight.value = `${height}px`;
      }
    });
    resizeObserver.observe(parentElement);
  }
});

// 组件卸载时停止监听
onUnmounted(() => {
  if (resizeObserver) {
    resizeObserver.disconnect();
  }
});

// 计算宽度和高度
const computedWidth = computed(() => props.width || parentWidth.value);
const computedHeight = computed(() => props.height || parentHeight.value);

// 切换到下一张幻灯片
const nextSlide = () => {
  if (slides.value.length > 1) {
    currentIndex.value = (currentIndex.value + 1) % slides.value.length;
  }
};

// 切换到上一张幻灯片
const prevSlide = () => {
  if (slides.value.length > 1) {
    currentIndex.value = (currentIndex.value - 1 + slides.value.length) % slides.value.length;
  }
};

// 图片加载完成时的回调
const onImageLoad = (index) => {
  slides.value[index].loading = false;
};
</script>
<template>
  <div ref="swiperRef" class="swiper" :style="{ width: computedWidth, height: computedHeight }">
    <div class="carousel-container" :style="{ height: computedHeight }">
      <div
          v-for="(slide, index) in slides"
          :key="index"
          class="slide"
          :class="{ active: currentIndex === index }"
      >
        <img
            :src="slide.url"
            alt="幻灯片图片"
            @load="onImageLoad(index)"
        />
        <!-- 显示标题和描述 -->
        <div
            v-if="slide.title || slide.description"
            class="text-overlay"
        >
          <div v-if="slide.title" class="title">{{ slide.title }}</div>
          <div v-if="slide.description" class="description">
            {{ slide.description }}
          </div>
        </div>
      </div>
    </div>
    <button v-if="slides.length > 1" class="prev" @click="prevSlide">&#10094;</button>
    <button v-if="slides.length > 1" class="next" @click="nextSlide">&#10095;</button>
  </div>
</template>

<style scoped>
.swiper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.carousel-container {
  position: relative;
  height: 100%;
}

.slide {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}

.slide.active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.5));
}

.loading, .error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  border-radius: 5px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.error {
  background-color: rgba(255, 0, 0, 0.5);
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 24px;
  z-index: 10;
  transition: background-color 0.3s ease;
}

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

/* 标题和描述样式 */
.text-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 24px;
  margin-bottom: 10px;
  text-align: center;
}

.description {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
}
</style>